<template>
    <div>
        <el-card class="box-card">
            <h2>定稿合同</h2>
            <el-form :model="contractForm" :rules="rules" ref="contractForm" label-width="120px">
                <el-form-item label="合同名称：" prop="name">
                    <el-input v-model="contractForm.name" readonly></el-input>
                </el-form-item>
                <el-form-item label="客户：" prop="customer">
                    <el-input v-model="contractForm.customer" readonly></el-input>
                </el-form-item>
                <el-form-item label="开始时间：" prop="beginTime">
                    <el-date-picker
                            v-model="contractForm.beginTime"
                            type="date"
                            :picker-options="beginDatePickerOptions"
                            readonly
                            disabled
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间：" prop="endTime">
                    <el-date-picker
                            v-model="contractForm.endTime"
                            type="date"
                            :picker-options="endDatePickerOptions"
                            readonly
                            disabled
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="合同内容：" prop="content">
                    <el-input v-model="contractForm.content" type="textarea" :rows="10"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            contractForm: {
                name: '',
                customer: '',
                beginTime: '',
                endTime: '',
                content: '',
                userName: '',
                attachments: []
            },
            rules: {
                name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
                customer: [{ required: true, message: '请选择客户', trigger: 'change' }],
                beginTime: [
                    { required: true, message: '请选择开始时间', trigger: 'change' },
                    { validator: this.validateBeginTime, trigger: 'change' }
                ],
                endTime: [
                    { required: true, message: '请选择结束时间', trigger: 'change' },
                    { validator: this.validateEndTime, trigger: 'change' }
                ],
                content: [{ required: true, message: '请输入合同内容', trigger: 'blur' }]
            }
        };
    },
    computed: {
        beginDatePickerOptions() {
            return {
                disabledDate: time => time.getTime() < Date.now() - 86400000
            };
        },
        endDatePickerOptions() {
            return {
                disabledDate: time => this.contractForm.beginTime
                    ? time.getTime() < new Date(this.contractForm.beginTime).getTime()
                    : false
            };
        }
    },
    methods: {
        fetchContractDetails(contractName) {
            this.axios.get(`/api/contract/name/${contractName}`)
                .then(response => {
                    const contract = response.data.data;
                    this.contractForm.name = contract.name;
                    this.contractForm.customer = contract.customer;
                    this.contractForm.beginTime = contract.beginTime;
                    this.contractForm.endTime = contract.endTime;
                    this.contractForm.content = contract.content;
                })
                .catch(error => {
                    console.error('Error fetching contract details:', error);
                    this.$message.error('获取合同详情失败');
                });
        },
        submitForm() {
            this.contractForm.userName = this.getCurrentUserName();
            this.$refs.contractForm.validate(valid => {
                if (valid) {
                    this.axios.post(`/api/contract/name/${this.contractForm.name}/finalize`, { content: this.contractForm.content })
                        .then(() => {
                            this.$message.success('合同定稿成功');
                            this.resetForm();
                        })
                        .catch(error => {
                            console.error('Error finalizing contract:', error);
                            this.$message.error('合同定稿失败');
                        });
                } else {
                    this.$message.error('请完善表单信息');
                }
            });
        },
        getCurrentUserName() {
            return '当前用户'; // Replace with actual method to get current user
        },
        resetForm() {
            this.$refs.contractForm.resetFields();
            this.contractForm.attachments = [];
        },
    },
    created() {
        const contractName = this.$route.params.contractName; // Assuming the route contains the contract name
        if (contractName) {
            this.fetchContractDetails(contractName);
        }
    }
};
</script>

<style scoped>
.box-card {
    margin: auto;
    width: 600px;
}
.el-form-item {
    margin-bottom: 20px;
}
</style>
